<template>
  <div>
    <div class="header">
      <el-form ref="form" :model="userList" inline>
        <el-form-item label="类别：">
          <el-select v-model="userList.classify" @input="addValue">
            <el-option label="全部" value="" />
            <el-option
              v-for="(item, index) in pest"
              :key="index"
              :label="item"
              :value="item"
            />

          </el-select>
        </el-form-item>
        <el-form-item label="是否检疫对象:">
          <el-checkbox @input="addcheckbox" />
        </el-form-item>
        <el-form-item label="按名称筛选:">
          <el-input v-model="userList.search" placeholder="请输入" @input="addInput" />
        </el-form-item>
        <el-button type="primary" icon="el-icon-edit" @click="addList">添加记录</el-button>
      </el-form>
    </div>
    <el-table :data="dataList" style="width: 100%" border stripe height="43vh">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="classify" label="类别" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="alias" label="别名" />
      <el-table-column prop="plant" label="寄宿植物" width="700" />
      <el-table-column prop="symptom" label="危害状" />
      <el-table-column prop="part" label="主要危害部位" />
      <el-table-column prop="isBool" label="全国检疫形式" />
      <el-table-column label="操作" fixed="right">
        <template #default="{row}">
          <el-link type="primary" @click="editList(row)">修改</el-link>
          <el-link type="danger" @click="deleList(row)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="userList.page"
      :page-sizes="[10, 15, 20, 25]"
      :page-size="userList.listRows"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 修改对话框 -->
    <el-dialog
      title="添加有害生物"
      :visible.sync="dialogVisible"
      width="60%"
      @close="dialogClose"
    >
      <el-form ref="addRef" :model="addFrom" label-width="140px" :rules="addRules">
        <div class="diabox">
          <div class="box1">
            <el-form-item label="类别:" prop="classify">
              <el-select v-model="addFrom.classify" placeholder="请输入">
                <el-option v-for="(item,index) in pest" :key="index" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item label="危害状:">
              <el-input v-model="addFrom.symptom" placeholder="可用多个用英文逗号拼接" />
            </el-form-item>
            <el-form-item label="寄主植物:">
              <el-input v-model="addFrom.plant" placeholder="可用多个用英文逗号拼接" />
            </el-form-item>
            <el-form-item label="林业补充检疫省份:">
              <el-input v-model="addFrom.check_province" placeholder="可用多个用英文逗号拼接" />
            </el-form-item>
            <el-form-item label="防治措施:">
              <el-input v-model="addFrom.measures" />
            </el-form-item>
            <el-form-item label="相似种类:">
              <el-input v-model="addFrom.similar" />
            </el-form-item>
          </div>
          <div class="box2">
            <el-form-item label="学名:" prop="name">
              <el-input v-model="addFrom.name" />
            </el-form-item>
            <el-form-item label="别名:">
              <el-input v-model="addFrom.alias" placeholder="可用多个用英文逗号拼接" />
            </el-form-item>
            <el-form-item label="主要危害部位:">
              <el-input v-model="addFrom.part" placeholder="可用多个用英文逗号拼接" />
            </el-form-item>
            <el-form-item label="识别要点:">
              <el-input v-model="addFrom.different" />
            </el-form-item>
            <el-form-item label="全国检疫形式:">
              <el-select v-model="addFrom.is_check" placeholder="请输入">
                <el-option v-for="(item,index) in isNum" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="形态特征:">
              <el-input v-model="addFrom.morphology" />
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div class="box-text">典型图片:</div>
      <el-upload
        class="avatar-uploader"
        action="/admin/common/uploadImage"
        :show-file-list="false"
        :http-request="uploadimg"
      >
        <img v-if="addFrom.cover" :src="addFrom.cover" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addition">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改对话框 -->
    <el-dialog
      title="修改有害生物"
      :visible.sync="editVisible"
      width="60%"
      @close="editClose"
    >
      <el-form ref="editRef" :model="editFrom" label-width="140px" :rules="editRules">
        <div class="diabox">
          <div class="box1">
            <el-form-item label="类别:" prop="classify">
              <el-select v-model="editFrom.classify" placeholder="请输入">
                <el-option v-for="(item,index) in pest" :key="index" :label="item" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item label="危害状:">
              <el-input v-model="editFrom.symptom" placeholder="可用多个用英文逗号拼接" />
            </el-form-item>
            <el-form-item label="寄主植物:">
              <el-input v-model="editFrom.plant" placeholder="可用多个用英文逗号拼接" />
            </el-form-item>
            <el-form-item label="林业补充检疫省份:">
              <el-input v-model="editFrom.check_province" placeholder="可用多个用英文逗号拼接" />
            </el-form-item>
            <el-form-item label="防治措施:">
              <el-input v-model="editFrom.measures" />
            </el-form-item>
            <el-form-item label="相似种类:">
              <el-input v-model="editFrom.similar" />
            </el-form-item>
          </div>
          <div class="box2">
            <el-form-item label="学名:" prop="name">
              <el-input v-model="editFrom.name" />
            </el-form-item>
            <el-form-item label="别名:">
              <el-input v-model="editFrom.alias" placeholder="可用多个用英文逗号拼接" />
            </el-form-item>
            <el-form-item label="主要危害部位:">
              <el-input v-model="editFrom.part" placeholder="可用多个用英文逗号拼接" />
            </el-form-item>
            <el-form-item label="识别要点:">
              <el-input v-model="editFrom.different" />
            </el-form-item>
            <el-form-item label="全国检疫形式:">
              <el-select v-model="editFrom.is_check" placeholder="请输入">
                <el-option v-for="(item,index) in isNum" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="形态特征:">
              <el-input v-model="editFrom.morphology" />
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div class="box-text">典型图片:</div>
      <el-upload
        class="avatar-uploader"
        action="/admin/common/uploadImage"
        :show-file-list="false"
        :http-request="edituploadimg"
      >
        <img v-if="editFrom.cover" :src="editFrom.cover" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon" />
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="editition">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { dataApi, listApi, imgAPI, addPlantsApi, delePlantsApi } from '@/api/Bioinformatics'
export default {
  data() {
    return {
      heigth: (window.innerHeight) * 0.65,
      // 表格数据
      dataList: [],
      // 下拉数据
      pest: [],
      // 表格参数
      userList: {
        page: 1,
        listRows: 10,
        classify: '',
        search: ''
      },
      total: null,
      // 对话框显示
      dialogVisible: false,
      editVisible: false,
      // 添加表单
      addFrom: {
        id: 0,
        // 病害
        classify: '病害',
        // 学名
        name: '',
        // 别名
        alias: '',
        // 主要危害部位
        part: '',
        // 危害状
        symptom: '',
        // 寄主植物
        plant: '',
        // 图片
        cover: '',
        // 是否是全国检疫对象 0:否,1:林业,2:农业,3:农林业
        is_check: '',
        // 林业补充检疫省份 多个用英文逗号拼接
        check_province: '',
        // 形态特征
        morphology: '',
        // 相似种类
        similar: '',
        // 识别要点
        different: '',
        // 防治措施
        measures: ''
      },
      // 修改表单
      editFrom: {
        id: 0,
        // 病害
        classify: '病害',
        // 学名
        name: '',
        // 别名
        alias: '',
        // 主要危害部位
        part: '',
        // 危害状
        symptom: '',
        // 寄主植物
        plant: '',
        // 图片
        cover: '',
        // 是否是全国检疫对象 0:否,1:林业,2:农业,3:农林业
        is_check: '',
        // 林业补充检疫省份 多个用英文逗号拼接
        check_province: '',
        // 形态特征
        morphology: '',
        // 相似种类
        similar: '',
        // 识别要点
        different: '',
        // 防治措施
        measures: ''
      },
      // 是否是全国检疫对象
      isNum: [
        { label: '否', value: 0 },
        { label: '林业', value: 1 },
        { label: '农业', value: 2 },
        { label: '农林业', value: 3 }
      ],
      // 添加表单验证
      addRules: {
        classify: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      editRules: {
        classify: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      }

    }
  },
  created() {
    this.getdataApi()
    this.getlistApi()
  },
  methods: {
    // 有害生物下拉数据
    async getdataApi() {
      const res = await dataApi()
      console.log(res)
      this.pest = res
    },
    // 表格主体数据
    async getlistApi() {
      const res = await listApi(this.userList)
      console.log(res)
      this.dataList = res.data
      this.dataList.forEach(item => {
        if (item.is_check !== '') {
          if (item.is_check === 0) {
            item.isBool = '否'
          } else if (item.is_check === 1) {
            item.isBool = '林业'
          } else if (item.is_check === 2) {
            item.isBool = '农业'
          } else {
            item.isBool = '农林业'
          }
        }
      })
      this.total = res.count - 0
    },
    // 分页功能逻辑
    handleSizeChange(newSize) {
      this.userList.listRows = newSize
      this.getlistApi()
    },
    handleCurrentChange(newNum) {
      this.userList.page = newNum
      this.getlistApi()
    },
    // 添加逻辑
    addList() {
      this.addFrom.id = 0
      this.dialogVisible = true
    },
    addcheckbox(val) {
      if (val === false) {
        this.addFrom.is_check = 0
      } else {
        this.addFrom.is_check = 1
      }
      this.getlistApi()
    },
    // // 图片上传
    beforeAvatarUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isLt5M
    },
    async uploadimg({ file }) {
      try {
        const data = await imgAPI(file)
        this.addFrom.cover = data
        console.log(this.addFrom.cover)
      } catch (error) {
        console.log(error)
      }
    },
    async edituploadimg({ file }) {
      try {
        const data = await imgAPI(file)
        this.addFrom.cover = data
        console.log(this.addFrom.cover)
      } catch (error) {
        console.log(error)
      }
    },
    // 确定添加
    addition() {
      this.$refs.addRef.validate(async(valid) => {
        if (!valid) return false
        await addPlantsApi(this.addFrom)
        this.dialogVisible = false
        this.$message.success('添加成功！')
        this.getlistApi()
      })
    },
    // 确定编辑
    editition() {
      this.$refs.editRef.validate(async(valid) => {
        if (!valid) return false
        await addPlantsApi(this.editFrom)
        this.editVisible = false
        this.$message.success('修改成功！')
        this.getlistApi()
      })
    },
    // 对话框关闭事件
    dialogClose() {
      this.addFrom = {}
    },
    editClose() {
      // this.editFrom = {}
    },
    // 筛选逻辑
    addValue() {
      this.getlistApi()
    },
    addInput() {
      this.getlistApi()
    },
    // 修改
    editList(row) {
      this.editVisible = true
      this.editFrom.id = row.id
      this.editFrom.classify = row.classify
      this.editFrom.name = row.name
      this.editFrom.alias = row.alias
      this.editFrom.part = row.part
      this.editFrom.symptom = row.symptom
      this.editFrom.plant = row.plant
      this.editFrom.cover = row.cover
      this.editFrom.is_check = row.is_check
      this.editFrom.check_province = row.check_province
      this.editFrom.morphology = row.morphology
      this.editFrom.similar = row.similar
      this.editFrom.different = row.different
      this.editFrom.measures = row.measures
    },
    // 删除
    async deleList(row) {
      const prve = await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      console.log(prve)
      if (prve !== 'confirm') return this.$message.info('已取消删除')
      await delePlantsApi({ id: row.id })
      this.getlistApi()
      this.$message.success('删除成功！')
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  .el-form-item {
    margin-right: 25px;
  }
}
.el-link {
  margin-right: 10px;
}
.el-pagination{
  margin-top:20px;
}
.diabox{
  display: flex;
  justify-content: space-between;
  .box1{
    width: 50%;
  }
  .box2{
    width: 50%;
  }
  .el-input{
    width: 75%;
  }
  .el-select {
    width: 75%;
  }
}

.box-text{
    text-align: right;
    vertical-align: middle;
    float: left;
    font-weight: 700;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: 6.5%;
  }
// 图片样式
.avatar-uploader-icon {
  border: 1px dashed #333;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #333;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-button{
  margin-bottom: 10px;
}
</style>
